<template>
  <div class="baidu-map-com">
    <el-dialog :visible.sync="dialogVisible" @close="$emit('update:show', false)">
      <template slot="title">
        <el-form>
          <el-form-item label="搜索">
            <el-input v-model="keyword" placeholder="" id="keyword"></el-input>
          </el-form-item>
          <el-form :inline="true" :model='point'>
            <el-form-item label="经度">
              <el-input v-model.number="point.lng"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model.number="point.lat"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="small">确定</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </template>
      <div id="map"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            address: '',
            point: { lng: null, lat: null }, //lng->经度 lat->纬度
            dialogVisible: false,
            map: null
        }
    },
    methods: {
        initMap() {
            this.map = new BMap.Map('map')
            var point = new BMap.Point(116.404, 39.915)
            this.map.centerAndZoom(point, 15)
            const ac = new BMap.Autocomplete({
                input: 'keyword',
                location: this.map
            })
            ac.addEventListener('onconfirm', e => {
                let _value = e.item.value
                let myValue =
                    _value.province +
                    _value.city +
                    _value.district +
                    _value.street +
                    _value.business
                this.keyword = myValue
                let local = new BMap.LocalSearch(this.map, {
                    onSearchComplete: () => {
                        let point = local.getResults().getPoi(0).point
                        let address = local.getResults().getPoi(0).address
                        this.address = address
                        console.log(local.getResults().getPoi(0))
                        this.setPlace(point)
                    }
                })
                local.search(myValue)
            })
            this.map.enableScrollWheelZoom(true) //鼠标滚动
        },
        setPlaceByAddressString(address) {
            const myGeo = new BMap.Geocoder()
            myGeo.getPoint(address, point => {
                this.setPlace(point)
                this.address = address
            })
        },
        setPlace(point) {
            this.point = point
            this.map.centerAndZoom(point, 16)
            this.map.addOverlay(new BMap.Marker(point))
            var infoWindow = new BMap.InfoWindow(this.address, {
                title: `<h3>${this.keyword}</h3>`
            }) // 创建信息窗口对象
            this.map.openInfoWindow(infoWindow, point) //开启信息窗口
        },
        getPlace() {}
    },
    watch: {
        show(value) {
            this.dialogVisible = this.show
            if (value) {
                this.$nextTick(() => {
                    this.initMap()
                    // this.setPlaceByAddressString('宜春市环城西路769号')
                })
            }
        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss">
.baidu-map-com {
    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
        border-color: #ccc;
        outline: none;
    }
    .el-dialog__header {
        .el-form-item__content {
            display: inline-block;
            width: 80%;
        }
    }
    .el-dialog__body {
        padding: 5px 10px;
        height: 500px;
    }
    div#map {
        width: 100%;
        height: 100%;
        border: 1px solid #eee;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
            0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
}
.tangram-suggestion-main {
    z-index: 9999;
}
</style>

